<template>
  <div class="scan-code">
    <a-tabs class="scan-code-tab" default-active-key="1">
      <a-tab-pane key="1" :title="$t('login.form.loginByJJT')">
        <div class="qr-box">
          <div id="qr_code"></div>
          <div class="qr-text">{{ $t('login.form.loginByJJT.tips') }}</div>
          <a-link @click="changeLogin(LoginMethods.password)">{{
            $t('login.form.backLogin')
          }}</a-link>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { getThird } from '@/api/user';
  import LoginMethods from '../constant';

  const emit = defineEmits(['changeLogin']);
  const changeLogin = (method: LoginMethods) => {
    emit('changeLogin', method);
  };

  interface WwLoginParams {
    id: string;
    appid: string;
    agentid: string;
    redirect_uri: string;
    state?: string;
    href?: string;
    style?: string;
  }

  const wwLogin = (data: WwLoginParams) => {
    const frame = document.createElement('iframe');
    let url = `https://jjt.ccccltd.cn/wwopen/sso/qrConnect?appid=${data.appid}&agentid=${data.agentid}&redirect_uri=${data.redirect_uri}&state=${data.state}&login_type=jssdk`;
    url += data.style ? `&style=${data.style}` : '';
    url += data.href ? `&href=${data.href}` : '';
    frame.src = url;
    frame.className = 'qr-frame';
    frame.width = '240px';
    frame.height = '240px';
    const el = document.getElementById(data.id) as HTMLIFrameElement;
    el.innerHTML = '';
    el.appendChild(frame);
    frame.onload = () => {
      if (frame.contentWindow?.postMessage && window.addEventListener) {
        window.addEventListener('message', (event) => {
          let host = 'https://jjt.ccccltd.cn';
          const hostArr = host.split(':');
          if (hostArr[1] === '80') [host] = [hostArr[0]];
          if (event.data && event.origin.indexOf(host) > -1) {
            window.location.href = event.data;
          }
        });
        frame.contentWindow?.postMessage('ask_usePostMessage', '*');
      }
    };
  };
  // 企业微信登录获取第三方链接url，可判断系统是否支持扫码登录
  getThird('WECHAT_ENTERPRISE').then((res) => {
    console.log('get-url', res);
  });

  onMounted(() => {
    // eslint-disable-next-line no-undef
    // const wwLogin = new WwLogin({
    //   id: 'qr_code',
    //   appid: 'wwcbd09cea76e76e7d',
    //   agentid: '1000020',
    //   redirect_uri: 'http://192.168.10.123:5173/login',
    //   state: 'sessionid',
    //   href: '',
    //   lang: 'zh',
    // });
    // wwLogin({
    //   id: 'qr_code',
    //   appid: 'wwcbd09cea76e76e7d',
    //   agentid: '1000020',
    //   redirect_uri: 'http://localhost:5173/dashboard',
    //   state: 'sessionid',
    //   href: '',
    // });
  });
</script>

<script lang="ts">
  export default {
    name: 'ScanCode',
  };
</script>

<style lang="less" scoped>
  .scan-code {
    :deep(.arco-tabs-nav) {
      &::before {
        display: none;
      }
    }
    margin-top: 34px;
    :deep(.arco-tabs-nav-tab) {
      justify-content: center;
    }
    .qr-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .qr-text {
      font-size: 16px;
      color: var(--color-text-3);
      margin: 8px 0;
    }
    .back-text {
      font-size: 16px;
      color: rgb(var(--primary-6));
      line-height: 24px;
      cursor: pointer;
    }
  }
</style>

<style>
  .qr-frame {
    border: none;
  }
</style>
